<template>
  <div class="home">
  	<!-- 首页 -->
  	<div class="search-top">
  		<router-link to="./search"><input class="search-input" type="text" name="" placeholder="输入您想要搜索的内容"></router-link>
  		<img class="search-img" src="@/assets/yunbangkechen1.png">
  	</div>
  	<swiper :options="bannerOption" v-if="listImg.length>0">
      <swiper-slide class="swiper-demo-img" v-for="(item, index) in listImg" :key="index">
      	<a :href="item.url"><img :src="item.img"></a>
      </swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
    <div class="nav">
    	<div class="flex-nav">
    		<div class="nav-item" v-for="(item, index) in columns" @click="router({path: 'dietInfo', query: {column_id: item.id}})">
    			<img :src="item.img">
    			<p>{{item.title}}</p>
    		</div>    		
    		<div class="nav-item" @click="router({path: '/payCourse'})">
    			<img src="@/assets/yunbangkechen11.png">
    			<span class="soid">付费</span>
    			<p>付费点播</p>
    		</div>
	  		<div class="nav-item" @click="router({path: '/more'})">
	  			<img src="@/assets/yunbangkechen12.png">
	  			<p>更多</p>
	  		</div>
    	</div>
    </div>
    <div class="section">
    	<h2>精彩专区<img class="h2-img" src="@/assets/yunbangkechen3.png"></h2>
    	<p class="title">每周更新，精选热门优质课程</p>
    	<div class="item-list border-block" v-for="(item, index) in jingcai" :key="index" @click="router({path: 'dietInfo', query:{column_id: item.id}})">
    		<div class="img">
    			<img v-if="item.image" :src="item.image">
    			<span>{{item.title}}</span>
    		</div>
    		<div class="con">
    			 <p class="tip">{{item.introduce}}</p>
    			 <p class="video-num">共{{item.node}}节</p>
    		</div>
    	</div>
    </div>
    <div class="section recommed">
    	<h2>真人故事<img class="h2-img" src="@/assets/yunbangkechen3.png"></h2>
    	<p class="title">每周更新，精选热门优质课程</p>
    	<div class="item-list border-block" v-for="(item, index) in recommeds" :key="index" @click="router({path: 'payDetials', query: {id: item.id}})">
    		<div class="img">
    			<img :src="item.img">
    		</div>
    		<div class="con">
    			 <p class="tip">{{item.title}}</p>
    			 <p class="video-num">
    			 	<span class="time">
    			 		<img src="@/assets/yunbangkechen4.png"> {{item.audio_long}}
    			 	</span>
    			 	<span class="price">￥{{item.price}}</span>
    			 </p>
    		</div>
    	</div>
    </div>
    <div class="section recommed">
      <h2>视频专区<img class="h2-img" src="@/assets/yunbangkechen3.png"></h2>
      <p class="title">观看视频课程，更直观更精彩</p>
      <div class="item-list border-block" v-for="(item, index) in videoList" :key="index" @click="router({path: 'videoDetails', query: {id: item.id}})">
        <div class="img">
          <img :src="item.img">
          <div class="mask-bg"><img src="@/assets/liebiao.png" alt=""></div>
        </div>
        <div class="con">
           <p class="tip">{{item.title}}</p>
           <p class="video-num">
            <span class="time">
              <img src="@/assets/yunbangkechen4.png"> {{item.leng}}
            </span>
           </p>
        </div>
      </div>
      <p class="more" @click="router({path: './videoDemand'})">查看更多 <img src="@/assets/gerenzhongxin13.png" alt=""></p>
    </div>
    <div class="section class">
    	<h2>分类点播<img class="h2-img" src="@/assets/yunbangkechen3.png"></h2>
    	<p class="title">各类点播课程教你呵护胎儿成长</p>
    	<div class="item-list" v-for="(item, index) in pay_audios" :key="index" @click="router({path: 'courseClass', query: {id: item.id}})">
    		<img :src="item.img">
    		<span class="mask"></span>
    		<div class="div-tip">
    			<span></span>
    			<h3>{{item.title}}</h3>
    			<p>{{item.brief}}</p>
    		</div>
    		<div class="flex-bottom">
    			<p class="bottom-title">{{item.title}}</p>
    			<p class="num">
    				<span class="video-num">共{{item.count}}课</span>
    				<span class="person-num">{{item.play_num}}人已点播</span>
    			</p>
    		</div>
    	</div>
    </div>
  </div>
</template>

<script>

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { get_column, wonderful_cloumn, get_banner_list, get_recommend, get_pay_audio, getHomeVideo, baseUrl } from '@/api/api'

export default {
  components: {
		swiper,
		swiperSlide
  },
  data () {
    return {
    	bannerOption: {
				pagination: {
					el: '.swiper-pagination',
					clickable: true
				},
				autoplay: {
					delay: 3000,
					stopOnLastSlide: false,
					disableOnInteraction: true,
				},
				loop: true,
				observer:true,
				observeParents:true,
      },
			jingcai: [], //精彩专区
			recommeds: [], //热门推荐
			pay_audios: [], //付费分类点播
    	listImg: [],
			columns: [],
			baseUrl,
      videoList: [],
    }
  },
  created () {
		this.get_banner_lists()
		this.get_columns()
		this.wonderful_cloumns()
		this.get_recommends()
		this.get_pay_audios()
    this.getHomeVideo()
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
    // 获取banner图
    get_banner_lists () {
    	get_banner_list().then((res) => {
    		this.listImg = res.data.info
    	}).catch((err) => {
    		console.log(err)
    	})
    },
    // 获取分类栏目
    get_columns () {
    	get_column().then((res) => {
        var length = (res.data.info.length < 6) ? res.data.info.length : 6
        for(var i=0; i<length; i++){
          this.columns.push(res.data.info[i])
        }
    	}).catch((err) => {
    		console.dir(err)
    	})
    },
    // 获取精彩专区
    wonderful_cloumns () {
    	wonderful_cloumn().then((res) => {
    		this.jingcai = res.data.info
    	}).catch((err) => {
    		console.dir(err)
    	})
    },
    // 热门推荐
    get_recommends () {
    	var jsonData = {
    		hot: 1,
    		class: '',
    	}
			get_recommend(jsonData).then((res) => {
				this.recommeds = res.data.info
			}).catch((err) => {
				console.log(err)
			})
    },
    // 热门推荐付费音频
    get_pay_audios () {
      var jsonData = {
        hot: 1,
      }
    	get_pay_audio(jsonData).then((res) => {
    		this.pay_audios = res.data.info
    	}).catch((err) => {
    		console.log(err)
    	})
    },
    // 获取视频专区
    getHomeVideo () {
      getHomeVideo().then((res) => {
        this.videoList = res.data.info
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .home
    background-color #f2f2f2
    min-width 100vw
    min-height 100vh
    padding-bottom 5.9rem
    .search-top
      position: relative
      .search-input
        line-height 4.4rem
        height 4.4rem
        color #999
        background-color #fff
        width 100%
        padding-left 1.5rem
        box-sizing border-box
        outline none
        font-size 1.6rem
      .search-img
        width 1.6rem
        position absolute
        right 1.5rem
        top 1.4rem
    .swiper-demo-img
      height 17.8rem
    .nav
      background-color #fff
      padding-top 2.6rem
      padding-bottom .9rem
      .flex-nav
        overflow hidden
        width 100%;
        .nav-item
          text-align center
          color #666
          font-size 1.2rem
          margin-bottom 1.5rem        
          position relative  
          float left
          width 25%
          .soid
            width 2.7rem
            height 1.6rem
            background-color #9F7FFF
            border-radius .4rem
            line-height 1.6rem
            color #fff
            font-size 1rem
            text-align center
            position absolute
            right 1.2rem
            top .6rem
          img
            width auto
            height 5.5rem
            display inline-block
            margin-bottom .3rem
    .section
      padding-top 2.6rem
      margin-top 1rem
      background-color #fff
      h2
        color #333
        line-height 1.7rem
        font-size 1.7rem
        height 1.7rem
        font-weight bold
        text-align center
        margin-bottom 1.5rem
        .h2-img
          width 1rem
          display inline-block
          vertical-align middle
          position: relative
          top -.2rem
          margin-left .5rem
      .title
        text-align center
      .border-block
        border-bottom 1px solid #e5e5e5
      .item-list
        display flex
        padding 2rem 0
        margin 0 1.5rem
        .img
          width 12rem
          min-width 12rem
          max-width 12rem
          height 8rem
          border-radius .4rem
          overflow hidden
          position: relative
          margin-right 1.5rem
          img
            width 100%
            height 100%
          span
            background-color rgba(0,0,0,.5)
            position absolute
            width 100%
            height 100%
            top 0px
            left 0px
            color #fff
            text-align center
            line-height 8rem
            font-size 1.5rem
        .con
          position relative
          flex 1
          .tip
            font-size 1.3rem
            line-height 2.4rem
            color #666
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          .video-num
            line-height 1.4rem
            font-size 1.2rem
            color #999
            position absolute
            bottom .3rem
    .recommed
      .more
        line-height 4.4rem
        height 4.4rem
        text-align center
        font-size 1.3rem
        color #999
        position relative
        img
          display inline-block
          width .6rem
      .mask-bg
        position absolute
        width 100%
        height 100%
        background-color rgba(0,0,0,.4)
        top 0
        left 0
        img
          width 2.7rem!important
          height 2.7rem!important
          position absolute
          left 50%
          top 50%
          margin-left -1.35rem
          margin-top -1.35rem
      .tip
        color #333
        font-weight bold
      .video-num
        display flex
        width 100%
        .time
          color #999
          font-size 1.2rem
          display flex
          min-width 50%
          img
            width 1.4rem
            height 1.4rem
            margin-right .8rem
        .price
          color #FF659B
          line-height 1.4rem
          font-size 1.5rem
          font-weight bold
          min-width 50%
          text-align right
    .class
      padding-bottom 3rem
      .item-list
        padding 0
        margin-top 3rem
        position relative
        display block
        img
          height 16rem
        .mask
          position absolute
          background linear-gradient(0deg, rgba(0,1,26,0), rgba(0,1,26,.6))
          width 100%
          height 16rem
          top 0px
          left 0px
        .flex-bottom
          display flex
          padding 1.5rem
          padding-bottom 0
          .bottom-title
            color #333
            line-height 1.8rem
            font-size 1.5rem
            height 1.8rem
            font-weight bold
          .num
            text-align right
            flex 1
            line-height 1.8rem
            height 1.8rem
            font-size 1.2rem
            .video-num
              color #FF659B
              margin 1.5rem
            .person-num
              color #999
        .div-tip
          position absolute
          left 3.7rem
          top 5rem
          color #fff
          z-index 9
          h3
            font-weight bold
            font-size 1.8rem
          p
            width 15rem
            height 3rem
            font-size 1.2rem
            font-weight 500
            line-height 1.8rem
            margin-top .5rem
          span
            position absolute
            width 8rem
            height 1.4rem
            left -.5rem
            background-color #000
            top 1.2rem
            z-index -1
</style>